function createElm(fn) {
  vm.fn = fn;
  return {
    name: 'box',
    click: () => {
      console.log(this);
    }
  }
}

let vm = {
  name: 'vm111',
  createElm,
}

with(vm) {
  // 说明vue render模板中定义的箭头函数，因为render是在with(this)块中进行的，最后函数执行一般是包裹在invokeWithErrorHandling中执行，即定义错误错误处理函数和this指向当前实例执行，但是箭头函数
  // 的this执行是和定义的位置有关，所以这里箭头函数其实是依据闭包存下了用到的this中的数据
  // 事实证明with中箭头函数的闭包会把整个with block存下来，即用到了vm中的任意数据，那么会把vm这个对象存下来
  createElm(() => {
    console.log(name); // 会输出vm111
    name = 'vm222';
    console.log(this); // 会输出空对象
  })
}

vm.fn();
console.log(vm.name); // 会输出vm222